<template>
  <div class="home-page">
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="welcome-banner">
          <h1>数据分析系统</h1>
          <p>强大的数据可视化和分析工具</p>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="intro-card">
          <template #header>
            <div class="card-header">
              <h2>数据驱动决策</h2>
            </div>
          </template>
          <div class="intro-content">
            <p>欢迎使用数据分析系统，这是一个功能强大的数据可视化和分析工具，可以帮助您更好地理解和利用数据。</p>
            <p>通过本系统，您可以：</p>
            <ul>
              <li>查看关键业务指标和KPI</li>
              <li>创建自定义数据仪表盘</li>
              <li>生成各类数据图表和可视化</li>
              <li>导出数据报表和分析结果</li>
            </ul>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="feature-section">
      <el-col :span="8" v-for="(feature, index) in features" :key="index">
        <el-card shadow="hover" class="feature-card">
          <template #header>
            <div class="feature-header">
              <el-icon :size="24" :color="feature.color">
                <component :is="feature.icon" />
              </el-icon>
              <span>{{ feature.title }}</span>
            </div>
          </template>
          <div class="feature-content">
            <p>{{ feature.description }}</p>
            <el-button type="primary" @click="navigateTo(feature.route)">
              {{ feature.buttonText }}
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { 
  Odometer, 
  TrendCharts, 
  PieChart, 
  DocumentCopy 
} from '@element-plus/icons-vue'

const router = useRouter()

// 功能特性
const features = ref([
  {
    title: '仪表盘',
    description: '查看关键业务指标和实时数据，支持自定义和多维度分析',
    icon: 'Odometer',
    color: '#409EFF',
    route: '/dashboard',
    buttonText: '查看仪表盘'
  },
  {
    title: '数据图表',
    description: '丰富的图表类型和可视化选项，帮助您更好地理解数据',
    icon: 'TrendCharts',
    color: '#67C23A',
    route: '/charts',
    buttonText: '浏览图表'
  },
  {
    title: '数据报表',
    description: '自定义报表模板，导出PDF、Excel等格式，满足各类汇报需求',
    icon: 'DocumentCopy',
    color: '#E6A23C',
    route: '/report',
    buttonText: '生成报表'
  }
])

// 导航到指定路由
const navigateTo = (route: string) => {
  router.push(route)
}
</script>

<style scoped>
.home-page {
  padding: 20px;
}

.welcome-banner {
  text-align: center;
  margin-bottom: 30px;
  padding: 30px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.welcome-banner h1 {
  font-size: 28px;
  margin-bottom: 10px;
  color: #303133;
}

.welcome-banner p {
  font-size: 16px;
  color: #606266;
}

.intro-card {
  margin-bottom: 30px;
}

.card-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.intro-content {
  line-height: 1.8;
}

.intro-content p {
  margin-bottom: 15px;
}

.intro-content ul {
  padding-left: 20px;
  margin-bottom: 20px;
}

.intro-content li {
  margin-bottom: 10px;
}

.feature-section {
  margin-bottom: 20px;
}

.feature-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.feature-header {
  display: flex;
  align-items: center;
}

.feature-header span {
  margin-left: 10px;
  font-size: 16px;
  font-weight: bold;
}

.feature-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.feature-content p {
  margin-bottom: 20px;
  flex: 1;
  line-height: 1.6;
  color: #606266;
}
</style> 